import APPImg from '@/components/AppImg';
import { getFaqList } from '@/services/center';
import { findByCodeList } from '@/services/login';
import { useUrlParams } from '@/utils';
import { ArrowRightOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { Card, Collapse, Flex, theme, type CollapseProps } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { getLocale, Helmet, useIntl, useLocation } from 'umi';

const Problem: React.FC = () => {
  const { token } = theme.useToken();
  const id = useUrlParams('id');

  const panelStyle: React.CSSProperties = useMemo(() => {
    return {
      marginBottom: 24,
      background: token.colorFillAlter,
      borderRadius: token.borderRadiusLG,
      border: 'none',
    };
  }, [token.borderRadiusLG, token.colorFillAlter]);
  const intl = useIntl();

  const { data: leftType } = useRequest(() => findByCodeList({ code: 'faqType' }));
  const { data, loading } = useRequest(getFaqList);
  const isEn = getLocale() == 'en-US';

  const [key, setKey] = useState<number>(1);
  const { search } = useLocation();
  useEffect(() => {
    setKey(id as any);
  }, [id, search]);
  const { faqType: leftList } = leftType?.data || {};
  const val = useMemo(() => {
    const list = data?.data.filter((item: any) => {
      return item.type == key;
    });
    const title = leftList?.find((item) => item.value == key)?.name;
    return { title, list };
  }, [key, data, leftList]);
  const { list } = val;
  const items: CollapseProps['items'] = useMemo(() => {
    return list?.map((item: any) => {
      const { content, id, title: titleCn, titleEn, contentEn } = item;
      const title = isEn ? titleEn : titleCn;
      return {
        key: id,
        label: title,
        children: <div>{isEn ? contentEn : content}</div>,
        style: panelStyle,
      };
    });
  }, [list, panelStyle, isEn]);
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.problem_meta_title' })}</title>
      </Helmet>
      <div className="problem">
        <div className="problem_top" style={{ padding: isEn ? '30px 0' : '30px 0 50px' }}>
          <div
            className="common"
            style={{ textAlign: 'center', lineHeight: isEn ? '26px' : 'auto' }}
          >
            <div style={{ fontSize: 30, fontWeight: 'bold', color: '#222' }}>
              {intl.formatMessage({ id: 'center.problem' })}
            </div>
            <div style={{ fontSize: 18, color: '#333', marginTop: 10 }}>
              {intl.formatMessage({ id: 'center.problem_word' })}
            </div>

            <div
              style={{
                fontSize: 18,
                color: '#333',
                maxWidth: isEn ? 565 : 'auto',
                margin: '0 auto',
              }}
            >
              {intl.formatMessage({ id: 'center.problem_word1' })}
            </div>
          </div>
        </div>
        <Flex gap={20} justify="space-between" className="problem_content common">
          <div style={{ width: 285 }}>
            <Card
              loading={loading}
              bordered={false}
              style={{ boxShadow: 'none' }}
              styles={{
                body: {
                  padding: '0',
                },
              }}
            >
              <div className="problem_content_tab">
                {leftList?.map((item) => {
                  const { name, value } = item;

                  return (
                    <Flex
                      onClick={() => {
                        setKey(value as any);
                      }}
                      key={name}
                      align="center"
                      justify="space-between"
                      className={`problem_content_tab_item ${
                        value == key ? 'problem_content_tab_active' : ''
                      }`}
                    >
                      <div>{name}</div>
                      <div>
                        <ArrowRightOutlined />
                      </div>
                    </Flex>
                  );
                })}
              </div>
            </Card>
            <div style={{ marginTop: 20 }}>
              <APPImg />
            </div>
          </div>
          <Card
            bordered={false}
            styles={{
              body: {
                padding: '0',
              },
            }}
            style={{ flex: 1, boxShadow: 'none' }}
            loading={loading}
          >
            <div>
              <Collapse
                style={{ backgroundColor: '#fff' }}
                bordered={false}
                expandIconPosition="end"
                items={items}
              />
            </div>
          </Card>
        </Flex>
      </div>
    </>
  );
};

export default Problem;
